<template>

	<!-- 插件市场 https://ext.dcloud.net.cn/plugin?id=1232 -->
	<zui-box>
		<!-- 头部导航 -->
		<view class="navbar">
			<u-navbar :fixed="true" title=" " @rightClick="btnTool()" :safeAreaInsetTop="true" bgColor="rgb(131, 28, 25)"
				title-color="white">
				<view class="u-nav-slot" slot="left"></view>
				<view class="u-nav-slot" slot="right">
					<block v-if="cartList.length > 0">
						<view class="right_text" v-if="btnType === 'edit'">编辑</view>
						<view class="right_text" v-if="btnType === 'done'">完成</view>
					</block>
				</view>
				<view class="title" slot="center">
					购物车
				</view>
			</u-navbar>
		</view>

		<!-- 商品部分 -->
		<view class="cart_box" v-if="cartList&&cartList.length>0">

			<!-- //设置为纵向-->
			<!-- //修改过组件内部的背景颜色为透明颜色 -->
			<!-- //修改过组件内部的勾选的图标 -->
			<u-checkbox-group iconSize='30rpx'  v-model="checkboxValue1" placement="column"
				@change="checkboxChange()">
				<view class="list" v-for="item in cartList" :key="item.id">
					<view class="item">
						<u-checkbox :name="item.id" shape="circle" active-color="#AA334F"></u-checkbox>
						<!-- //商品盒子 -->
						<view class="good_box">
							<!-- 商品图片 -->
							<view class="good_img">
								<image :src="item.goods.goods_thumb"></image>
							</view>
							<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
							<view class="title_wrap">
								<view class="title u-line-1">{{ item.goods.goods_name }}</view>
								
								
								<view class="sku" >
									<u-tag v-for="(val,i) in item.specs.goods_specs.split('-')" :key='i' :text="val"
										type="warning" size="mini" plain class='tag' />
								</view>
							
								
								<zui-both padding='0'>
									<view class="price">
										¥{{ Math.trunc(item.goods.goods_price) }}
									</view>
									<view class="fee" v-if="item.module_id ==1 || item.module_id ==2">
										手工费：￥{{item.goods.process_fee}}
									</view>
								</zui-both>
								
								
								
							</view>
						</view>
						<view class="number_box">
							<u-number-box v-model="item.goods_num" bgColor='transparent' inputWidth='50rpx' :min="1"
								:disabledInput="true" @change="add($event, item.id)">
								<text slot="input" style="color:#333; width: 50px;text-align: center;" class="input">
									{{item.goods_num}}
								</text>

							</u-number-box>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
				<view class="emputy" v-else>
			<u-empty mode="car" text='可以去看看有哪些想买的' :icon="require('@/static/img/car.png')">
				<view class="btn" @click="xz_home('index')">随便逛逛</view>
			</u-empty>
		</view>

		<!-- //底部 -->
		<zui-tabbarFoot v-if="cartList.length!=0">
			<!-- 提交按钮 -->
			<!-- '+totalCount+' -->
			<zui-submit :price='totalPrice*1' @submit='btnClick'
				:buttonText="btnType === 'edit'?'结算('+totalCount+')':'删除'" buttonColor="#AA334F">
				<u-checkbox-group v-model="is_checkALL" iconSize='30rpx' @change="checkedAll">
					<u-checkbox name="全选" label="全选" shape="circle" active-color="#AA334F"><span>全选</span></u-checkbox>
				</u-checkbox-group>
			</zui-submit>
		</zui-tabbarFoot>

	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				checkboxValue1: [],
				is_checkALL: [], //是否全选
				checkALL: false,
				btnType: 'edit', //按钮类型
				loadStatus: 'loadmore',
				cartList: [], //购物车列表
				showModal: false, //modal弹窗
				title: '提示', //弹窗标题
				content: '确认删除商品?', //弹窗内容
				delId: '', //删除id,
				
			};
		},
		computed: {
			// 价格合计
			totalPrice() {
				let list = this.checkboxValue1;
				let sumPrice = 0;
				let items = this.cartList;
				list.forEach((item) => {
					items.forEach(val => {
						let priceVal = parseFloat(val.goods.goods_price);
						let salesVal = parseFloat(val.goods_num);

						if (item == val.id) {
							console.log(item, val.id, item == val.id)
							sumPrice += priceVal * salesVal;
							console.log(sumPrice, item, val.id, item == val.id)
						}
					});
				})

				let tofixNum = sumPrice.toFixed(2);
				console.log(tofixNum)
				return parseFloat(tofixNum);
			},
			// 数量统计
			totalCount() {
				let list = this.checkboxValue1;
				let totalNumber = 0;
				totalNumber = this.checkboxValue1.length
				return totalNumber;
			},

		},
		onShow() {
			this.checkboxValue1=[]
			this.is_checkALL=[]
			this.get_cart();
			console.log('=======', this.cartList);
		},
		methods: {
			//初始化数据
			get_cart() {
				let that = this;
				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				this.$nextTick(() => {
					uni.$u.http.get('/app/cart/list', {
						params: {},
						custom: {
							auth: true,
							toast: false,
							catch: false,
						},
					}).then(res => {
						that.cartList = res;
						console.log('res', that.cartList)
					}).catch(err => {})
				})
			},

			// 管理按钮
			btnTool() {
				console.log(this.btnType)
				if (this.btnType == 'edit') {
					this.btnType = 'done'
				} else if (this.btnType == 'done') {
					this.btnType = 'edit'
				}
			},
		

			// 选中商品
			checkboxChange(u) {
				// this.$nextTick，进行一定延迟，否则拿数据不及时
				this.$nextTick(() => {
					let items = this.cartList;
					this.cartList = items;
					console.log('单选', this.cartList)

					let len = this.checkboxValue1.length;

					// 如果选择的数组中有值，并且长度等于列表长度，就是全选
					if (len > 0 && len == items.length) {
						this.is_checkALL.push('全选')
					} else {
						this.is_checkALL = [];
					}
				})

			},
			// 数量增减
			add(e, id) {
				
				let list = this.cartList;
				let num = e.value;
				console.log(e, id,num);
				
				//
				
				// goods_cart_id
				
				// goods_num
				uni.$u.debounce(()=>{
					
			
				
				//节流
				
				uni.$u.http.post('/app/cart/edit', {
					goods_cart_id:id,
					goods_num:num,
				},{
					custom:{
						auth: true,
						toast: true,
						catch: true,
					}
				}
				
				).then(res => {
				
					
				}).catch(err => {
				})
				
				
					}, 500)
				
				
				
				
			},
			// 全选
			checkedAll(e) {
				let items = this.cartList;
				if (e.length > 0) {
					//选中
					items.forEach(val => {
						this.checkboxValue1.push(val.id);
					});
				} else {
					//没选中
					items.forEach(val => {
						this.checkboxValue1 = [];
					});
				}
				this.cartList = items;
			},
			// 结算
			btnClick() {
				
				if(this.checkboxValue1.length==0){
					return false;
				}
				
				let type = 'order'
				if (this.btnType === 'edit') {
					type = 'order'
					console.log('生成订单')
					// confirm
					console.log(this.checkboxValue1);
					let goods_cart_id = this.checkboxValue1.join(",");
					
					let specs_field = '';
					let list = this.checkboxValue1;
					let items = this.cartList;
					let arr = []
					list.forEach((item) => {
						items.forEach(val => {
							let specsId = val.specs_id;
							let goods_num = val.goods_num;
							if (item == val.id) {
								arr.push(item);
								specs_field += specsId +',' +goods_num +';';
								console.log(specs_field)
							}
						});
					})
					
					specs_field = specs_field.substring(0,specs_field.length-1);
					console.log(goods_cart_id,'specs_field',specs_field)
					
					
					// 1手工艺
					// 2和4是普通的
					// 6商城
					// 7积分
					
					if(this.cartList[0].module_id==1 || this.cartList[0].module_id==2 || this.cartList[0].module_id==4  ){
						uni.navigateTo({
							url: '/pages/index/confirm?cart_field=' + goods_cart_id
						});
					}
					if(this.cartList[0].module_id==6 ){
						uni.navigateTo({
							url: '/pages/one_mouth/confirm?cart_field=' + goods_cart_id
						});
					}
					if(this.cartList[0].module_id==7 ){
						uni.navigateTo({
							url: '/pages/integral/confirm?cart_field=' + goods_cart_id
						});
					}
					
					
					
					
				} else {
					type = 'del'
					console.log('删除购物车')
					// /app/cart/delete
					
					console.log(this.checkboxValue1);
					let goods_cart_id = this.checkboxValue1.join(",");
					// 保存地址
					uni.$u.http.post('/app/cart/delete', {
							goods_cart_id: goods_cart_id,
					
						}, {
							custom: {
								auth: true,
								toast: true,
								catch: false,
							}
						}
					
					).then(res => {
						//加入购物车成功
						this.say('删除成功');
						this.get_cart();
					}).catch(err => {})
					
				}
				
			}

		}

	}
</script>

<style lang="scss" scoped>
	/* //自定义顶部栏 */
	.navbar {
		font-size: 30rpx;

		/deep/.title {
			color: #fff;
		}

		/deep/.u-icon {
			padding: 10rpx;
			border-radius: 50%;
			// background:rgba(35 ,159 ,229,0.85);
		}

		.right_text {
			color: #fff;
		}
	}


	//修改复选框样式
	// .u-checkbox {
	// 	width: 80rpx !important;
	// 	height: 80rpx !important;
	// 	margin: 0 auto !important;

	// 	// position: absolute;
	// 	/deep/.u-checkbox__icon-wrap {
	// 		margin: 0 auto !important;
	// 		background: transparent;

	// 		.u-icon__icon {
	// 			color: #232539 !important;
	// 		}
	// 	}
	// }



	.cart_box {
		.list {
			.item {
				position: relative;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				align-items: center;
				background: #fff;
				margin-bottom: 18rpx;

				.good_box {
					display: flex;
					justify-content: space-between;

					.good_img {
						width: 176rpx;
						height: 176rpx;
						border-radius: 12rpx;
						overflow: hidden;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.title_wrap {
						width: 440rpx;

						.title {
							text-align: left;
							font-size: 30rpx;
							color: #333333 ;
							line-height: 46rpx;
						}

						.fee {
							font-size: 26rpx;
							color: #9D97A7;
							padding-right: 30rpx;
						}
						.sku {
								font-size: 24rpx;
								font-weight: 600;
								margin: 20rpx 0;
								display: flex;
								justify-content: flex-start;
								flex-wrap: wrap;
								
								.tag{
									margin-right: 20rpx;
								}
								
						
							}

						.price {
							font-size: 26rpx;
							color: #E63A2A;

							.large {
								margin-left: 6rpx;
								font-size: 30rpx;
							}
						}

						.clamp {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							display: block;
						}

					}
				}

				//步进器 盒子
				.number_box {
					position: absolute;
					right: 40rpx;
					bottom: 70rpx;

					/deep/.u-number-box__minus {
						width: 34rpx !important;
						height: 34rpx !important;
						border: 1px solid #666 !important;
						border-radius: 4rpx;

						.u-icon__icon {
							font-size: 24rpx !important;
							color: #666 !important;
						}
					}

					/deep/.u-number-box__minus--hover {
						background: transparent !important;
						border: 1px solid #666 !important;

						.u-icon__icon {
							font-size: 24rpx !important;
							color: #666 !important;
						}
					}

					/deep/.u-number-box__minus--disabled {
						background: transparent !important;
						border: 1px solid #666 !important;

						.u-icon__icon {
							font-size: 24rpx !important;
							color: #666 !important;
						}
					}

					/deep/.u-number-box__input {
						color: #666 !important;
					}

					/deep/.u-number-box__input--disabled {
						color: #666 !important;
					}

					/deep/.u-number-box__plus {
						width: 34rpx !important;
						height: 34rpx !important;
						border: 1px solid #666 !important;
						border-radius: 4rpx;

						.u-icon__icon {
							font-size: 24rpx !important;
							color: #666 !important;
						}
					}

					/deep/.u-number-box__plus--hover {
						background: transparent !important;
						border: 1px solid #666 !important;

						.u-icon__icon {
							font-size: 24rpx !important;
							color: #666 !important;
						}
					}

					/deep/.u-number-box__plus--disabled {
						background: transparent !important;
						border: 1px solid #666 !important;

						.u-icon__icon {
							font-size: 24rpx !important;
							color: #666 !important;
						}
					}
				}
			}
		}

	}


	// emputy
	.emputy {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: -webkit-linear-gradient(to right, rgba(253, 1, 62, 0.3) 0%, rgba(253, 1, 62, 1) 100%);
			background: linear-gradient(to right, rgba(253, 1, 62, 0.3) 0%, rgba(253, 1, 62, 1) 100%);
		}
	}

	.bottom {
		padding: 0 20rpx;
		width: 100%;
		position: fixed;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		z-index: 99;
		height: 110rpx;
		background-color: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10rpx 6rpx rgba(0, 0, 0, 0.1);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.checkall {
			position: absolute;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);

			span {
				color: #999;
				font-size: 32rpx;
			}
		}

		.price {
			margin-right: 20rpx;
			color: #fd013e;
			font-size: 32rpx;

			.sml {
				margin-right: 10rpx;
				color: #666;
				font-size: 36rpx;
			}
		}
	}


	.footer {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 9;
		border-top: 1rpx solid #e8e8e8;
		display: flex;
		justify-content: space-between;
		padding-left: 30rpx;

		.allBox {
			display: flex;
			align-items: center;

			.chose {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			.all {
				color: #000000;
				font-size: 28rpx;
			}
		}

		.total {
			display: flex;
			align-items: center;
			color: #000;

			.text {
				font-size: 22rpx;
			}

			.price {
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		.por {
			width: 248rpx;
			height: 100%;
			background-color: #be1b1c;
			color: #fff;
			text-align: center;
			line-height: 96rpx;
		}
	}

	//底部提交栏
	.zui-foot {
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	/* #ifdef H5 */
	.zui-foot {
		bottom: 100rpx;
	}

	/* #endif */
</style>
